<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="68px">
            <el-form-item label="联保小组编号" prop="id">
                <el-input v-model="queryParams.id" placeholder="请输入联保小组编号" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="联保小组名称" prop="name">
                <el-input v-model="queryParams.name" placeholder="请输入联保小组名称" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <!-- <el-form-item label="证件类型" prop="documentType">
                <el-select v-model="queryParams.documentType" placeholder="请选择证件类型" clearable @change="handleQuery">
                    <el-option label="身份证" value="身份证"></el-option>
                    <el-option label="护照" value="护照"></el-option>
                    <el-option label="驾驶证" value="驾驶证"></el-option>
                </el-select>
            </el-form-item> -->

            <!-- <el-form-item label="证件号码" prop="documentId">
                <el-input v-model="queryParams.documentId" placeholder="请输入证件号码" clearable
                    @keyup.enter="handleQuery" />
            </el-form-item> -->
            <el-form-item label="申请日期" prop="application">
                <el-date-picker v-model="queryParams.application" type="date" placeholder="选择申请日期" clearable
                    value-format="yyyy-MM-dd" @change="handleQuery" />
            </el-form-item>

            <el-form-item label="审批状态" prop="status">
                <el-select v-model="queryParams.status" placeholder="请选择审批状态" @change="handleQuery">
                    <el-option v-for="(item, index) in statusOptions" :key="index" :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>


            <el-form-item>
                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-button type="primary" @click="addMember">新增</el-button>
        </el-row>

        <el-table :data="groupList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />

            <el-table-column label="联保小组编号" align="center" prop="id" />
            <el-table-column label="联保小组名称" align="center" prop="name" />
            <el-table-column label="联保小组总额度（元）" align="center" prop="sumPrice" />
            <el-table-column label="成员客户名称" align="center" prop="customerName" />
            <el-table-column label="申请日期" align="center" prop="application" />
            <el-table-column label="客户经理" align="center" prop="userId" />
            <el-table-column label="审批状态" align="center" prop="status" :formatter="formatStatus" />
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template #default="scope">
                    <div class="button-container">
                        <el-button type="danger" size="small" @click="remove(scope.row.id)">删除</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <el-row>
            <el-col :span="4" :offset="0">
                <el-pagination background :page-sizes="[1, 3, 5, 10, 15, 20]" :page-size="pageSize"
                    :current-page="pageNum" layout="total, sizes, prev, pager, next, jumper" :total="total"
                    @next-click="nextPage" @prev-click="prevPage" @current-change="skipPage"
                    @size-change="changeSize"></el-pagination>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    data() {
        return {
            pageSize: 5,
            pageNum: 1,
            total: 0,
            groupList: [],
            form: {},
            queryParams: {
                customerStatus: '',
                application: "",
                id: "",
                name: ""

            },
            statusOptions: [
                { value: 1, label: '已审核' },
                { value: 2, label: '待审核' },
                { value: 3, label: '已驳回' }
            ]
        };
    },
    methods: {

        formatStatus(row, column, cellValue) {
            // 在这里实现根据 cellValue 找到对应的 label
            const statusOption = this.statusOptions.find(option => option.value === cellValue);
            return statusOption ? statusOption.label : '';
        },

        addMember() {
            this.$router.push("/addMember");
        },
        handleQuery() {
            this.pageNum = 1;
            this.getList();
        },

        getList() {
            let param = {
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                params: {
                    status: this.queryParams.status,
                    application: this.queryParams.application,
                    id: this.queryParams.id,
                    name: this.queryParams.name,
                },
            };
            // 调用后端接口查询客户列表
            this.axios
                .post("api/customer-server/queryGroupList", param)
                .then((res) => {
                    let pageData = res.data.data;
                    //给分页赋值
                    this.total = pageData.total;
                    this.pageNum = pageData.pageNum;
                    this.pageSize = pageData.pageSize;
                    //表格赋值
                    this.groupList = pageData.list;

                })
        },
        //删除判断条件
        remove(id) {
            this.$confirm("是否确认删除?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                //发送参数请求
                this.deleteCustomer(id);
            });
        },
        //删除
        deleteCustomer(id) {
            this.axios.post("api/customer-server/deleteGroup/" + id).then(res => {
                if (res.data.code == 200) {
                    this.getList();
                }
            });
        },
        //带一个id去编辑页面
        updateCustomer(id) {
            this.$router.push({
                path: "/updateCustomer",
                query: {
                    id: id
                }
            });
        },


        resetQuery() {
            // 重置查询参数和表单
            this.queryParams = {
                name: "",
                id: "",
                idNumber: "",
                documentType: "",
                customerStatus: "",
                customerType: "",
                creditRating: "",
            };
            this.$refs.queryRef.resetFields();
            // 重置页码为第一页并重新获取数据
            this.pageNum = 1;
            this.getList();
        },
        handleSelectionChange(selection) {
            // 处理表格选中项变化事件
        },
        nextPage(val) {
            this.pageNum = val;
            this.getList();
        },
        prevPage(val) {
            this.pageNum = val;
            this.getList();
        },
        skipPage(val) {
            this.pageNum = val;
            this.getList();
        },
        changeSize(val) {
            this.pageSize = val;
            this.pageNum = 1;
            this.getList();
        },
    },
    created() {
        // 组件创建时获取客户列表数据
        this.getList();
    },
};
</script>

<style scoped>
.button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    /* 调整按钮之间的间距 */
}
</style>